<template>
  <div class="box">
    <div class="block">
      <div class="zero">
        <!-- 头部 -->
        <div class="onTop">
          <div class="left"><van-icon name="passed" />100%正品保证</div>
          <div class="count"><van-icon name="passed" />所有商品精挑细选</div>
          <div class="right"><van-icon name="passed" />售后无忧</div>
        </div>
        <!-- 数量和管理 -->
        <div class="onCount">
          <div class="left">
            购物数量：<span style="color: red">{{ length }}</span>
          </div>
          <div class="right">
            <button @click="switchover">管理</button>
          </div>
        </div>
      </div>
      <br /><br />
      <br /><br />
      <br />
      <!-- 主体 -->
      <div class="shop" v-for="(item, index) in orderData" :key="index">
        <div class="left">
          <div class="pic">
            <input
              @click="selectShop(item.id)"
              class="checkeds"
              type="checkbox"
              :name="item.cart_num"
              :id="item.truePrice"
            />
            <img :src="item.productInfo.image" alt="" />
          </div>
        </div>
        <div class="right">
          <div class="line">
            <div class="name" style="font-size: 10px">
              {{ item.productInfo.store_name }}
            </div>
          </div>
          <div class="detail">
            <!-- 规格 -->
            <div class="">属性：{{ item.productInfo.attrInfo.suk }}</div>
            <div class="rol">
              <!-- 价格 -->
              <span class="amount">￥{{ item.truePrice }}</span>
              <!-- 数量 -->
              <van-stepper
                :value="item.cart_num"
                disable-input
                @plus="item.cart_num++"
                @minus="item.cart_num--"
              />
              <!-- @change="countNum()" -->
              <div class="del" @click="delGoods(index, i)"></div>
            </div>
          </div>
        </div>
      </div>
      <br />
      <!-- 尾部 -->
      <div class="close">
        <div class="all">
          <input
            v-model="checked"
            @click="selectAll()"
            type="checkbox"
            name=""
            id=""
          />全选
          <!-- 购物车数量 -->
          <span>（{{ length }}）</span>
        </div>
        <div class="refer" v-show="Arefer">
          <div class="total">
            <span>合计:</span>
            <span>￥{{ totalPrice.toFixed(2) }}</span>
          </div>
          <div class="settlement" @click="close">结算</div>
        </div>
        <div class="refers" v-show="Brefers">
          <button>收藏</button>
          <button @click="deletes">删除</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getShop, getShopLength, getShopdel } from "@/api/request";
export default {
  data() {
    return {
      // 总价
      totalPrice: 0,
      // 全部数据
      orderData: [],
      // 全选
      checked: false,
      // 购物车数量
      length: [],
      // 结算按钮
      Arefer: true,
      // 删除按钮
      Brefers: false,
      // 获取id
      id: [],
    };
  },
  created() {
    // 获取购物车数据
    getShop().then((res) => {
      this.orderData = res.data.data.valid;
    });
    // 获取购物车数量
    getShopLength().then((res) => {
      this.length = res.data.data.count;
    });
    // 删除
  },
  methods: {
    // 单选
    selectShop(id) {
      // 获取id
      this.id = id;
      document.querySelectorAll(".checkeds").forEach((res) => {
        if (res.checked == false) {
          this.checked = false;
        }
      }, (this.checked = true)); // 调用计算总价
      this.tatol();
    },
    // 全选反选
    selectAll() {
      document.querySelectorAll(".checkeds").forEach((res) => {
        res.checked = !this.checked;
      });
      // 调用计算总价
      this.tatol();
    },
    // 计算总价
    tatol() {
      this.totalPrice = 0;
      document.querySelectorAll(".checkeds").forEach((res) => {
        if (res.checked == false) {
        } else {
          this.totalPrice += res.id * res.name;
        }
      });
    },
    // 点击管理切换
    switchover() {
      this.Arefer = !this.Arefer;
      this.Brefers = !this.Brefers;
    },
    // 删除
    deletes() {
      getShopdel(this.id).then((res) => {});
    },
    close() {
      this.$router.push("/close");
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.zero {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  background: #eee;
}
.onTop {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  color: #ccc;
  justify-content: space-evenly;
  font-size: 14px;
}

.onCount {
  width: 100%;
  background: white;
  height: 40px;
  line-height: 40px;
  display: flex;
  .left {
    flex: 1;
    margin-left: 2%;
  }
  .right {
    margin-right: 2%;
    button {
      height: 30px;
      width: 70px;
      line-height: 28px;
      text-align: center;
      background: white;
      border: none;
      border: 1px solid #ccc;
      margin-top: 5px;
    }
  }
}

.box {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.block {
  width: 100%;
  // margin-left: 1%;
}

.shop {
  width: 98%;
  margin-left: 1%;
  margin-bottom: 10px;
  box-shadow: 0px 8px 20px 0px rgba(97, 97, 97, 0.19);
  background: white;
  border-radius: 12px;
  margin-top: 2%;
  padding: 10px;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  .left {
    display: flex;
  }
  .right {
    margin-left: 2%;
    .name {
      text-overflow: ellipsis; //关键代码
      white-space: nowrap; /* 不换行 */
      overflow: hidden;
    }
  }
}

.line {
  display: flex;
  align-items: center;
}

.pic {
  img {
    width: 60px;
    height: 60px;
  }
}

.line div:nth-child(2) {
  margin-left: 16px;
}

.row {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.rol {
  display: flex;
  // padding-left: 40px;
  padding-top: 5px;
  .amount {
    width: 110px;
    color: red;
  }

  img {
    width: 60px;
    height: 30px;
  }
}

.refer {
  display: flex;
  margin-left: 10%;
  flex: 1;
}

.refers {
  width: 70%;
  display: flex;
  margin-right: 2%;
  justify-content: space-evenly;
  button {
    width: 80px;
    height: 30px;
    border-radius: 25px;
    color: white;
    text-align: center;
    line-height: 30px;
    margin-top: 5px;
    border: none;
    right: 0;
    background: red;
  }
}

.total {
  display: flex;
  flex: 1;
}

.close {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  position: fixed;
  background: white;
  bottom: 6%;
  left: 0;
}

.settlement {
  width: 80px;
  height: 30px;
  border-radius: 25px;
  color: white;
  text-align: center;
  line-height: 30px;
  margin-top: 5px;
  right: 0;
  background: red;
  margin-right: 2%;
}

.all {
  width: 30%;
  margin-left: 2%;
  // flex: 1;
}
</style>

